<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
  <head>
    <title>光影园林报名</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,uer-scalable=no">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
  </head>
  <body>
 
  
  <div class="container">
  
          
  <h4>光影园林外拍报名</h4>
  
  <img src="http://static.hutiao.me/snow/hdzq/images/gyyl.jpg" class="img-responsive">
  
  <p>雪花纯生中国古建筑摄影大赛•2014光影园林 湖北分赛区正式启动啦，现可通过微信报名参加四场专业外拍，赶快随雪花纯生一起，领略荆楚古建筑文化，用镜头记录家乡的古建筑之美吧。</p>
  <p class="text-warning">（所有外拍行程由主办方提供统一交通、食宿，消费者通过报名入选后，需自备摄影器材，并于外拍结束后提交一定数量参赛摄影作品。）</p>
  <p></p>
  <div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="http://static.hutiao.me/snow/hdzq/3gyylbm/cqs.html" class="thumbnail">
      <img src="http://static.hutiao.me/snow/hdzq/images/shijian_01.jpg">
    </a>
    <a href="http://static.hutiao.me/snow/hdzq/3gyylbm/jk.html" class="thumbnail">
      <img src="http://static.hutiao.me/snow/hdzq/images/shijian_02.jpg">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="http://static.hutiao.me/snow/hdzq/3gyylbm/es.html" class="thumbnail">
      <img src="http://static.hutiao.me/snow/hdzq/images/shijian_03.jpg">
    </a>
    <a href="http://static.hutiao.me/snow/hdzq/3gyylbm/sy.html" class="thumbnail">
      <img src="http://static.hutiao.me/snow/hdzq/images/shijian_04.jpg">
    </a>
  </div>
</div>
  
  <p class="text-muted">提示：点击古建筑图片可了解古建筑介绍详情。</p>
  
  <p></p>
  
  
  
  <div class="panel-footer">
  <h3><span class="label label-default">在线报名</span></h3>
  
<s:form id="huodongform" action="guangyingyuanlin" theme="simple" role="form">

  <div class="form-group">
    <label for="inputScene" class="">场景</label>
    <s:select list="{'襄阳.春秋寨','江夏.金口槐山','恩施.土司城','十堰.楚长城'}" theme="simple" name="bean.scene" id="inputScene" cssClass="form-control"></s:select>
  </div>

  <div class="form-group">
    <label for="inputName">姓名</label>
    <s:textfield key="bean.name" data-toggle="tooltip" cssClass="form-control" id="inputName" placeholder="" />
  </div>
  <div class="form-group">
    <label for="inputPhone">手机</label>
    <input type="number" name="bean.phone" class="form-control" id="inputPhone" placeholder="">
  </div>
  <div class="form-group">
    <label for="inputAge">年龄</label>
    <input type="number" name="bean.age" class="form-control" id="inputAge" placeholder="">
  </div>
  <div class="form-group">
    <label for="inputGender">性别</label>
    <s:select list="{'男','女'}" theme="simple" name="bean.gender" id="inputGender" cssClass="form-control"></s:select>
  </div>
  <div class="form-group">
    <label for="inputCity">城市</label>
    <s:textfield key="bean.city" cssClass="form-control" id="inputCity" placeholder="" />
  </div>
    <div class="form-group">
    <label for="inputCareer">职业</label>
    <s:textfield key="bean.career" cssClass="form-control" id="inputCareer" placeholder="" />
  </div>
  <s:hidden name="openId"></s:hidden>
  <s:submit id="saveForm" value="提交" data-loading-text="正在保存..." cssClass="btn btn-primary btn-lg btn-block" />
</s:form>
</div>
  
  
</div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/jquery.form.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    	$("form").submit(function(e){
    		
    		var name = $('#inputName').val();
    		var phone = $('#inputPhone').val();
    		if (name==null || name=='') {
    			alert("请填写姓名");
    			return;
    		}
    		if (phone==null || phone=='') {
    			alert("请填写手机号");
    			return;
    		}

    		var params=$('#huodongform').formSerialize();
    		params = decodeURIComponent(params,true);
    		$.ajax({
    			type: "POST",
				url: "./guangyingyuanlin_save",
				dataType: "json",
				data: params,
				async: false,
				success: function(data) {
					alert(data.result);
				},
				error: function(err) {
					alert("抱歉，我们遇到一点问题，请稍后再试。");
				}
			});
    		
    		
    	});
    });
    
    </script>

  </body>
</html>
